<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script type="text/javascript">

      window.onload = function (){

        var pattern = /^\d+$/;

        //提取公共方法
        function getSum(firstNum,secondNum,sumNum){
            //获取第一个加数对象
            var first = document.getElementById(firstNum);
            //获取第二个加数对象
            var second = document.getElementById(secondNum);
            //分别获取两个加数的值
            var firstNum = first.value;
            var secondNum = second.value;

            //获取和对象
            var sum = document.getElementById(sumNum);

            //如果两个加数都是数字则相加，且把结果写入结果位置
            if(pattern.test(firstNum) && pattern.test(secondNum)){
                sum.value = parseInt(firstNum)+parseInt(secondNum);
            }else if(!pattern.test(firstNum)){
                //如果第一个加数不是数字，则获取焦点且提示
                first.focus();
                alert("请填写正确的数字");
            }else if(!pattern.test(secondNum)){
                //如果第二个加数不是数字，则获取焦点且提示
                second.focus();
                alert("请填写正确的数字");
            }
        }

        //绑定第一个求和点击事件
        document.getElementById("one").onclick = function (){
            getSum("oneFirst","oneSecond","oneSum");
        }

        //绑定第二个求和点击事件
        document.getElementById("two").onclick = function (){
            getSum("twoFirst","twoSecond","twoSum");
        }

      }

    </script>

</head>
<body>

  <center>

    <br/><br/><br/><br/>
    <input type="text" id="oneFirst"/>
    <input type="text" id="oneSecond"/>
    <input type="button" value="求和" id="one">
    <input type="text" id="oneSum"/>

    <br/><br/><br/><br/>
    <input type="text" id="twoFirst"/>
    <input type="text" id="twoSecond"/>
    <input type="button" value="求和" id="two">
    <input type="text" id="twoSum"/>

  </center>

</body>
</html>